<template>
  <div class="page-container-content">
    <div class="page-config-left">
      <div class="page-config-title">
        <span class="title">数据源管理</span>
      </div>
      <el-menu default-active="1" class="el-menu-vertical-demo">
        <el-menu-item index="1">
          <span slot="title">安全运营</span>
        </el-menu-item>
        <el-menu-item index="2">
          <span slot="title">生产质量</span>
        </el-menu-item>
        <el-menu-item index="3" disabled>
          <span slot="title">人事出勤率</span>
        </el-menu-item>
      </el-menu>
    </div>
    <div class="page-config-right">
      <div class="page-config-form">
        <div class="page-config-title">
          <span class="title">基础信息</span>
          <div class="page-config-btn">
            <span><svg-icon icon="select" /> 保存</span>
            <span><svg-icon icon="add" /> 新建</span>
            <span><svg-icon class="icon" icon="delete" /> 删除数据源</span>
          </div>
        </div>
        <vxe-form :data="pageConfig" title-align="right" title-width="100" prevent-submit title-colon>
          <vxe-form-item title="数据源名称" field="class" span="8">
            <template v-slot>
              <vxe-input v-model="pageConfig.name" placeholder="请输入名称" clearable></vxe-input>
            </template>
          </vxe-form-item>
          <vxe-form-item title="主表" field="pTable" span="8">
            <template v-slot>
              <vxe-input v-model="pageConfig.pTable" placeholder="主表" clearable></vxe-input>
            </template>
          </vxe-form-item>
          <vxe-form-item title="是否启用" field="pTable" span="8">
            <template v-slot>
              <vxe-switch v-model="pageConfig.show" open-label="启用" :open-value="1" close-label="禁用"
                :close-value="0"></vxe-switch>
            </template>
          </vxe-form-item>
          <vxe-form-item title="数据源描述" field="tTable" span="24">
            <template v-slot>
              <vxe-input v-model="pageConfig.value" placeholder="数据源描述" clearable maxlength="100"
                show-word-count></vxe-input>
            </template>
          </vxe-form-item>
        </vxe-form>
      </div>
      <div class="page-config-table">
        <div class="page-config-title">
          <span class="title">表结构</span>
          <div class="page-config-btn">
            <span><svg-icon icon="code-table" /> 同步表结构</span>
            <span @click="insertEvent()"><svg-icon icon="add" /> 添加</span>
            <span @click="insertEvent(-1)">
              <svg-icon icon="editable" /> 插入
            </span>
            <span><svg-icon icon="delete" /> 删除</span>
          </div>
        </div>
        <vxe-table stripe border show-overflow keep-source ref="xTable" class="table-scrollbar" style="width: 100%"
          height="580px" align="center" :data="tableData" :edit-config="{
            trigger: 'click',
            mode: 'cell',
            icon: 'fa fa-pencil',
            showStatus: true,
          }">
          <vxe-table-column type="checkbox" fixed="left" width="60"></vxe-table-column>
          <vxe-table-column type="seq" fixed="left" title="序号" width="60"></vxe-table-column>
          <vxe-table-column field="label" fixed="left" title="显示列名" sortable width="100"
            :edit-render="{ name: 'input', defaultValue: '默认的名字' }"></vxe-table-column>
          <vxe-table-column field="name" title="列名" fixed="left" sortable width="100"
            :edit-render="{ name: 'input', defaultValue: 18 }"></vxe-table-column>
          <vxe-table-column field="key" title="主键" width="100" :edit-render="{
            name: '$select',
            options: [
              { label: '是', value: 1 },
              { label: '否', value: 0 },
            ],
          }"></vxe-table-column>
          <vxe-table-column field="type" title="字段类型" width="100"
            :edit-render="{ name: 'input', defaultValue: 18 }"></vxe-table-column>
          <vxe-table-column field="show" title="是否显示" width="100" :edit-render="{
            name: '$select',
            options: [
              { label: '是', value: 1 },
              { label: '否', value: 0 },
            ],
          }"></vxe-table-column>
          <vxe-table-column field="showType" title="显示格式" width="100"
            :edit-render="{ name: 'input', defaultValue: 18 }"></vxe-table-column>
          <vxe-table-column field="width" title="列宽" width="100"
            :edit-render="{ name: 'input', defaultValue: 18 }"></vxe-table-column>
          <vxe-table-column field="search" title="是否查询" width="100" :edit-render="{
            name: '$select',
            options: [
              { label: '是', value: 1 },
              { label: '否', value: 0 },
            ],
          }"></vxe-table-column>
          <vxe-table-column field="searchColumn" title="查询行" width="100"
            :edit-render="{ name: 'input', defaultValue: 18 }"></vxe-table-column>
          <vxe-table-column field="searchRow" title="查询列" width="100"
            :edit-render="{ name: 'input', defaultValue: 18 }"></vxe-table-column>
          <vxe-table-column field="searchType" title="查询类型" width="100"
            :edit-render="{ name: 'input', defaultValue: 18 }"></vxe-table-column>
          <vxe-table-column field="sort" title="排序" width="100"
            :edit-render="{ name: 'input', defaultValue: 18 }"></vxe-table-column>
        </vxe-table>
      </div>
    </div>
    <el-dialog title="导出代码" :visible.sync="importJsonDialog" width="900px" :show-close="true"
      class="small-padding-dialog" v-dialog-drag>
      <el-tabs type="border-card" class="no-box-shadow no-padding" v-model="activeCodeTab">
        <el-tab-pane label="Vue" name="vue">
          <code-editor :mode="'html'" :readonly="true" v-model="vueCode" :user-worker="false" />
        </el-tab-pane>
        <el-tab-pane label="HTML" name="html">
          <code-editor :mode="'html'" :readonly="true" v-model="htmlCode" :user-worker="false" />
        </el-tab-pane>
      </el-tabs>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" @click="copyVueCode">复制Vue代码
        </el-button>

        <el-button type="primary" size="small" @click="saveVueCode">导出Vue代码
        </el-button>
        <el-button size="small" @click="importJsonDialog = false">关闭
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import CodeEditor from "@/components/code-editor/index.vue";
import { generateCode } from "@/utils/code-generator";
import { saveAs } from "file-saver";
export default {
  components: {
    CodeEditor,
  },
  data() {
    return {
      pageConfig: {
        name: "",
      },
      activeCodeTab: "vue",
      importTemplate: "",
      vueCode: null,
      htmlCode: null,
      importJsonDialog: false,
      formJson: {
        form: JSON.stringify({
          name: "name",
          age: 0,
        }),
      },
      tableData: [
        {
          label: "姓名",
          name: "name",
          key: 1,
        },
        {
          label: "地址",
          name: "address",
          key: 0,
        },
      ],
      sexList: [],
      menuList: [
        {
          id: 1,
          label: "系统管理",
          children: [{ label: "子节点-0" }, { label: "子节点-1" }],
        },
        {
          id: 2,
          label: "数据源管理",
        },
      ],
    };
  },
  created() {

  },
  mounted() {
    const result = this.timeRange("2020-11", "2021-03");
    console.log(result);
  },
  methods: {
    // 获取开始日期到结束日期之间的所有日期的数组集合
    timeRange(startTime, endTime) {
      // 获取startTime, endTime 区间的全部日期 yyyy-MM 格式
      let result = [];
      let minTime = new Date(new Date(startTime).setDate(1));
      let maxTime = new Date(new Date(endTime).setDate(1));
      let current = minTime; // 当前日期
      do {
        const year = new Date(current).getFullYear();
        const month = new Date(current).getMonth() + 1;
        const label = `${year}-${month < 10 ? '0' + month : month}`;
        const key = `${year}${month < 10 ? '0' + month : month}`;
        result.push({
          label,
          key,
        });
        current.setMonth(current.getMonth() + 1);
      } while (current <= maxTime);
      return result
    },
    exportCode() {
      this.vueCode = generateCode(this.formJson);
      this.htmlCode = generateCode(this.formJson, "html");
      this.importJsonDialog = true;
    },
    saveVueCode() {
      this.saveAsFile(this.vueCode, `index.vue`);
    },
    copyVueCode() {
      this.$copyText(this.vueCode).then((res) => {
        this.$message({
          message: `复制成功`,
          type: "success",
        });
      });
    },
    importJson() {
      this.importTemplate = JSON.stringify(`test`, null, "  ");
      this.importJsonDialog = true;
    },
    saveAsFile(fileContent, defaultFileName) {
      this.$prompt("", "文件名", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputValue: "index", // 可选
        inputErrorMessage: "输入不能为空", // 可选
        inputValidator: (value) => {
          // 可选，点击按钮时，对文本框里面的值进行验证
          if (!value) {
            return "输入不能为空";
          }
        },
      })
        .then(({ value }) => {
          console.log(value);
          const name = `${value}.vue`;
          console.log(name);
          const fileBlob = new Blob([fileContent], {
            type: "text/plain;charset=utf-8",
          });
          saveAs(fileBlob, name);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    searchEvent() {
      this.$XModal.message({ message: "查询事件", status: "info" });
    },
    resetEvent() {
      this.$XModal.message({ message: "重置事件", status: "info" });
    },
    insertEvent(row) { },
    getInsertEvent() {
      let insertRecords = this.$refs.xTable.getInsertRecords();
      this.$XModal.alert(insertRecords.length);
    },
    getSelectionEvent() {
      let selectRecords = this.$refs.xTable.getCheckboxRecords();
      this.$XModal.alert(selectRecords.length);
    },
    saveEvent() {
      // const { insertRecords, removeRecords, updateRecords } =
      //   this.$refs.xTable.getRecordset();
      // this.$XModal.alert(
      //   `insertRecords=${insertRecords.length} removeRecords=${removeRecords.length} updateRecords=${updateRecords.length}`
      // );
    },
  },
};
</script>

<style lang="scss" scoped>
.page-container-content {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
}

.page-config-left {
  width: 246px;
  padding: 16px 6px;
  border-right: 1px solid #dcdfe6;
}

.page-config-right {
  width: calc(100% - 246px);
  padding: 16px;
}

.page-config-table {
  width: 100%;
  overflow: hidden;
}

.page-config-title {
  width: 100%;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background-image: linear-gradient(to right,
      #fc713163 5%,
      rgba(255, 255, 255, 0.1) 95%);

  .title {
    font-weight: bold;
    font-size: 18px;
  }

  .page-config-btn {
    flex: 1;
    padding: 0 6px;
    font-size: 12px;
    letter-spacing: 1px;
    color: #5a5f5e;
    display: flex;
    align-items: center;
    justify-content: flex-end;

    & span {
      cursor: pointer;
      margin-right: 10px;

      &:hover {
        color: #409eff;
      }
    }
  }

  &::before {
    display: block;
    content: "";
    width: 4px;
    height: 98%;
    margin-right: 6px;
    background: #409eff;
  }
}

::v-deep {
  .el-dialog__body {
    padding: 0px;
    color: #606266;
    font-size: 14px;
    word-break: break-all;
  }

  .el-tabs--border-card>.el-tabs__content {
    padding: 0px;
  }

  .el-tabs--border-card {
    background: #fff;
    border: 1px solid #dcdfe6;
    box-shadow: none;
  }

  .el-menu {
    border-right: none !important;
    list-style: none;
    position: relative;
    margin: 0;
    padding-left: 0;
    background-color: #fff;
  }

  .el-menu-item,
  .el-submenu__title {
    height: 36px;
    line-height: 36px;
    list-style: none;
  }
}

.tree {
  width: 100%;
}

.tree .tree-item {
  width: 100%;
  height: 36px;
  border-radius: 4px;
  padding: 0 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .tree-label {
    font: 1em sans-serif;
  }

  &:hover {
    background-color: var(--background-hover);
  }
}
</style>